/***
 * 富文本的浮动文本/图片功能
 * @Author: kevin.huang 
 * ****/
function FloatTools(editor) {
    $B.extend(this, FloatTools); //继承父类 
    var _this = this;
    this.editor = editor;
    this.target = undefined;
    this.wrap = $("<div tabindex='0' class='k_box_size' style='cursor:move; border: 1px solid #ccc;background: #A7CBFA;color:#fff;line-height:20px;height:20px;position:absolute;z-index:2111111111;top:-100000px;display:none;text-align:center;'>" + eConfig.label.draglabel + "</div>").appendTo(this.editor.jqObj);
    this.jqObj = this.wrap;
    var closeBtn = $("<div title='" + eConfig.label.delete + "' style='cursor:pointer;width:20px;height:20px;position:absolute;right:0;line-height:20px;top:0;text-align:center;'><i class='fa fa-cancel'></i></div>").appendTo(this.wrap);
    closeBtn.on("click", function () {
        _this.editor.$input = _this.editor.$fixInput;
        _this.editor.putFlowPanel2Undo(_this.target);
        _this.target.remove();
        _this.target = undefined;
        _this.editor._clearRangeRecord();
        _this.hide();
        _getBody().css("cursor", "default");
    });
    this.startPos = {};
    this.wrap.on("focus", function () {
        _this.rangeInfo = _this.editor._getRangeInfo();
    });
    var fixTop = 0, fixLeft = 0;
    this.wrap.draggable({
        onStartDrag: function (args) { //开始拖动
            _this.editor._setCurrentHtml();
            _this.editor.resizing = true;
            _this.wrap.css("cursor", "move");            
            _this.startPos.left = parseFloat( _this.target.css("left").replace("px" , "") );
            _this.startPos.top = parseFloat( _this.target.css("top").replace("px" , "") );
            if (_this.editor["resizeBox"]) {
                _this.editor["resizeBox"].hide();
            }
            _this.editor.removeSectionResizeBar();
        },
        onDrag: function (args) { //拖动中           
            var state = args.state;
            var data = state._data;
            var top = _this.startPos.top + data.topOffset + fixTop;
            var left = _this.startPos.left + data.leftOffset + fixLeft;
            _this.target.css({
                top: top,
                left: left
            });
        },
        onStopDrag: function (args) { //拖动结束
            _this.editor._onChange(true);
            _this.wrap.css("cursor", "move");
            _this.editor.resizing = false;
            if (_this.editor["resizeBox"]) {
                var matrix = _this.target.css("transform");
                var angle = parseFloat($B.getMatrixAngle(matrix));
                if (angle === 0) {
                    _this.editor["resizeBox"].show(_this.target);
                }
            }
            _this.editor.rebuildUserRange(_this.rangeInfo);
        },
        onMouseUp: function () {
            _this.editor._clearCurrentHtml();
            _this.editor.rebuildUserRange(_this.rangeInfo);
        }
    });
}
FloatTools.prototype = {
    constructor: FloatTools,
    show: function (target) {       
        this.target = target;
        var width = this.target.width();    
        var css = this._getPos();
        css.width = width;
        this.wrap.css(css).show();        
        this.editor.floatPropPanel.show(target);
    },
    _getPos:function(){
        var pos = this.target.position();        
        var borderL = this.editor.$inputWrap.css("border-left");
        if(borderL && borderL !== "none"){
            borderL = parseFloat( borderL.replace("px",""));
            pos.left = pos.left + borderL;
        }
        var toolbar = this.editor.jqObj.children(".k_edit_tools_wrap");
        if(toolbar.length > 0){
            pos.top = pos.top + toolbar.outerHeight();
        }
        var css = {
            top: pos.top - 16 ,
            left: pos.left 
        };
        return css;
    },
    onScroll:function(){
        if(this.wrap.css("display") !== "none"){
            var pos = this._getPos();
            this.wrap.css(pos);
        }        
    },
    hide: function () {
        this.editor.enabledFunc();
        this.editor.floatPropPanel.hide();
        this.wrap.hide();
        this.target = undefined;
        if (this.editor["resizeBox"]) {
            this.editor["resizeBox"].unbind();
            this.editor["resizeBox"].hide();
        }
    }
};
/***
 * 浮动图片/文本的属性面板
 * 设置透明度、旋转角度
 * **/
function FloatPropPanel(editor) {
    $B.extend(this, FloatPropPanel); //继承父类 
    var _this = this;
    this.editor = editor;
    this.target = undefined;
    this.wrap = $("<div style='top:-100000px;display:none;background:#fff;border: 1px solid #ccc;position:absolute;z-index:211111111111;width:250px;height:300px' class='k_box_shadow k_box_size k_float_seting_panel'></div>");
    this.jqObj = this.wrap;
    this.wrap.append("<div id='k_f1oat_pa1el_header' style='cursor:move;text-align:center;line-height:26px;border-bottom:1px solid #ccc;'>" + eConfig.label.floatSetTip + "</div>");
    this.wrap.append("<div style='text-align:left;padding-left:12px;line-height:25px;margin-top:12px;'>" + eConfig.label.floatOpacity + "<span style='padding-left:6px'></span></div>");
    var opacityDiv = $("<div style='text-align:left;padding-left:12px;line-height:25px;margin-top:6px;padding:2px 5px;' class='k_box_size'></div>").appendTo(this.wrap);
    this.wrap.append("<div style='text-align:left;padding-left:12px;line-height:25px;margin-top:12px;'>" + eConfig.label.floatAngle + "<span style='padding-left:6px;'></span></div>");
    var angleDiv = $("<div style='text-align:left;padding-left:12px;line-height:25px;margin-top:6px;padding:2px 5px;' class='k_box_size'></div>").appendTo(this.wrap);
    var shortBtns = $("<div style='padding-left:12px;margin-top:8px;'>" + eConfig.label.shortcut + "：<span v='0' style='padding:2px 4px;cursor:pointer;'>0°</span><span v='90' style='padding:2px 4px;cursor:pointer;'>90°</span><span v='180' style='padding:2px 4px;cursor:pointer;'>180°</span><span v='270' style='padding:2px 4px;cursor:pointer;'>270°</span></div>").appendTo(this.wrap);
    this.shadowBtn = $("<div style='padding-left:12px;margin-top:8px;line-height:22px;'>" + eConfig.label.isShadow + "：<input checked='checked' type='checkbox' id='_chk_shadow'/></div>").appendTo(this.wrap);
    this.wrap.append("<div style='padding-left:12px;margin-top:8px;line-height:22px;color:#766479;'>" + eConfig.label.resizeTip + "</div>");
    this.wrap.append("<div id='_z_index_it' style='padding-left:12px;margin-top:8px;line-height:22px;color:#766479;'><span>" + eConfig.label.zindex + "</span><i style='margin-left:20px;cursor:pointer;' title='" + eConfig.label.zindexTop + "' class='fa fa-up-big'></i><i style='margin-left:20px;cursor:pointer;' title='" + eConfig.label.zindexBottom + "' class='fa fa-down-big'></i></div>");
    this.wrap.appendTo(this.editor.jqObj);
    this.opacityDiv = opacityDiv;
    this.angleDiv = angleDiv;
    this.onChangeEndEvent = undefined;
    setTimeout(function () {
        opacityDiv.myslider({
            onChange: function (v) {
                _this.editor._onChange();
                opacityDiv.prev().children("span").html(v + "%");
                var opc = 1 - (v / 100);
                //console.log("onChange ==  " + opc);
                _this.target.children().first().css({
                    "-moz-opacity": opc,
                    "-khtml-opacity": opc,
                    "opacity": opc
                });
            }
        });
        angleDiv.myslider({
            start: 0,
            end: 360,
            onChange: function (v, isOnSet) {
                _this.editor._onChange();
                angleDiv.prev().children("span").html(v + "°");
                _this.target.css("transform", "rotate(" + v + "deg)");
                if (v !== 0) {
                    if (_this.editor.resizeBox) {
                        _this.editor.resizeBox.hide();
                    }
                }
                if (!isOnSet) {//避免逻辑死循环
                    clearTimeout(_this.onChangeEndEvent);
                    _this.onChangeEndEvent = setTimeout(function () {
                        if (_this.target) {
                            _this.editor.floatTools.show(_this.target);
                        }
                    }, 500);
                }
            }
        });
    }, 10);
    shortBtns.children("span").click(function () {
        var v = parseFloat($(this).attr("v"));
        _this.angleDiv.myslider("setValue", v);
        _this.editor.floatTools.show(_this.target);
    });
    this.shadowBtn = this.shadowBtn.find("input").click(function () {
        var isChk = $(this).prop("checked");
        if (_this.target) {
            if (isChk) {               
                _this.target.css({
                    "-moz-box-shadow": "0px 0px 3px 3px #D8D8D8",
                    "-webkit-box-shadow": "0px 0px 3px 3px #D8D8D8",
                    "box-shadow": "0px 0px 3px 3px #D8D8D8"
                }).addClass("k_box_shadow");
            } else {
                _this.target.css({
                    "-moz-box-shadow": "none",
                    "-webkit-box-shadow": "none",
                    "box-shadow": "none"
                }).removeClass("k_box_shadow");
            }
        }
    });
    //层级
    var tmpWrap = this.wrap.children("#_z_index_it");
    tmpWrap.find(".fa-down-big").click(function () {
        if (_this.target) {
            var zindex = parseInt(_this.target.css("z-index"));
            var minIndex;
            _this.target.siblings(".k_edit_float_panel").each(function () {
                var idx = parseInt($(this).css("z-index"));
                if (!minIndex) {
                    minIndex = idx;
                } else if (idx < minIndex) {
                    minIndex = idx;
                }
            });
            if (minIndex <= zindex) {
                var newIdx = minIndex - 1;
                _this.target.css("z-index", newIdx);
                var fchild = _this.target.children().first();
                var nextEl = fchild.css("z-index", newIdx).next();
                nextEl.css("z-index", minIndex);
                if (nextEl.hasClass("k_editor_float_img_wrap")) {//图片
                    var $img = nextEl.children("img").css("z-index", minIndex);
                    $img.next().css("z-index", minIndex + 1);
                }
            }
        }
    });
    tmpWrap.find(".fa-up-big").click(function () {
        if (_this.target) {
            var zindex = parseInt(_this.target.css("z-index"));
            var maxIndex;
            _this.target.siblings(".k_edit_float_panel").each(function () {
                var idx = parseInt($(this).css("z-index"));
                if (!maxIndex) {
                    maxIndex = idx;
                } else if (idx > maxIndex) {
                    maxIndex = idx;
                }
            });
            if (maxIndex >= zindex) {
                var newIdx = maxIndex + 1;
                _this.target.css("z-index", newIdx);
                var fchild = _this.target.children().first();
                var nextEl = fchild.css("z-index", newIdx).next();
                var topIndex = newIdx + 1;
                nextEl.css("z-index", topIndex);
                if (nextEl.hasClass("k_editor_float_img_wrap")) {//图片
                    var $img = nextEl.children("img").css("z-index", topIndex);
                    $img.next().css("z-index", topIndex + 1);
                }
            }
        }
    });
    //浮动面板可拖动功能
    this.wrap.draggable({
        handler: this.wrap.children("#k_f1oat_pa1el_header")
    });
}
FloatPropPanel.prototype = {
    constructor: FloatPropPanel,
    show: function (target) {
        if(this.target && this.target[0] === target[0]){
            return;
        }
        this.target = target;
        if (this.target.hasClass("k_box_shadow")) {
            this.shadowBtn.prop("checked", true);
        } else {
            this.shadowBtn.prop("checked", false);
        }        
        if (this.wrap.css("display") === "none") {
            this.wrap.css({
                top: 60 ,
                right: 50 
            }).show();
        }
        var matrix = this.target.css("transform");
        var angle = parseFloat($B.getMatrixAngle(matrix));
        if (angle < 0) {
            angle = angle + 360;
        }
        var opacity = Math.round((1 - parseFloat(this.target.children().first().css("opacity"))) * 100);
        var _this = this;
        setTimeout(function () {
            _this.opacityDiv.myslider("setValueSilent", opacity);
            _this.angleDiv.myslider("setValueSilent", angle);
        }, 1);
    },
    hide: function () {
        this.wrap.hide();
        this.target = undefined;
    }
};